<template>
	<view class="container">
		<!--货品详情.开始-->
		<view class="group-box">
			<!--循环.开始-->
			<view v-for="(item,index) in goodsList" :key="index" class="order-item">
				<view class="goods-box">
					<view @click.stop="linkUrl('../goods/show?id='+item.goodsId)" class="img-box">
						<image mode="widthFix" :src="$api.loadFile(item.imgUrl)"></image>
					</view>
					<view class="right">
						<text class="title">{{item.goodsTitle}}</text>
						<text class="attr">{{item.specText}}  x {{item.quantity}}</text>
						<text class="price">{{item.realPrice}}</text>
					</view>
				</view>
				<view class="form-list">
					<view class="list-box">
						<text class="title">满意度</text>
						<view class="remark right">
							<uni-data-checkbox mode="default" selectedColor="red" selectedTextColor="#ff0000" v-model="item.goodsScore" :localdata="range"></uni-data-checkbox>
						</view>
					</view>
					<view class="list-box block">
						<view class="remark">
							<textarea v-model="item.content" placeholder="必填,请输入商品评价信息" class="textarea"></textarea>
						</view>
					</view>
					<view class="upload-box">
						<view @tap="chooseImage(item.evaluateAlbums)" class="btn-box">
							<text class="icon iconfont icon-add">上传图片</text>
						</view>
						<view v-for="(album,aindex) in item.evaluateAlbums" :key="aindex" class="img-box">
							<text @click="delImage(item.evaluateAlbums,aindex)" class="close iconfont icon-close"></text>
							<image @click="viewImage(item.evaluateAlbums,aindex)" mode="widthFix" :src="$api.loadFile(album.thumbPath)"></image>
						</view>
					</view>
				</view>
			</view>
			<!--循环.结束-->
		</view>
		<!--货品详情.结束-->
		
		<view class="group-box tb-0">
			<view class="form-list">
				<view class="list-box">
					<text class="title">服务评分</text>
					<view class="remark">
						<view class="score-box">
							<text v-for="(num,index) in 5" 
								:key="index" 
								@click="serviceScore=num"
								:class="{red: index<serviceScore}"
								class="icon iconfont icon-star-full">
							</text>
						</view>
					</view>
				</view>
				<view class="list-box">
					<text class="title">物流评分</text>
					<view class="remark">
						<view class="score-box">
							<text v-for="(num,index) in 5" 
								:key="index" 
								@click="matterScore=num"
								:class="{red: index<matterScore}"
								class="icon iconfont icon-star-full">
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="group-box">
			<view class="form-foot">
				<button @click="submitFrom" class="btn submit">确认提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: 0, //订单ID
				serviceScore: 0, //服务评分
				matterScore: 0, //物流评分
				goodsList:[], //订单货品列表
				range: [
					{"value": 3,"text": "好评"},
					{"value": 2,"text": "中评"},
					{"value": 1,"text": "差评"},
				],
			}
		},
		methods: {
			//初始化数据
			async initData(id){
				let _this = this;
				//正在加载
				uni.showLoading({
				    title: '加载中'
				});
				//加载订单信息
				await _this.$api.request({
					url: `/account/order/${id}`,
				}).then(res=>{
					const orderModel = res.data;
					_this.orderId = orderModel.id;
					_this.goodsList = orderModel.orderGoods.filter(val=>val.deliveryStatus===1&&val.evaluateStatus===0);
					_this.goodsList.forEach(item=>{
						_this.$set(item, 'goodsScore', 0);
						_this.$set(item, 'content', '');
						_this.$set(item, 'evaluateAlbums', []);
					})
				});
				//关闭加载
				uni.hideLoading();
			},
			//选择上传图片
			chooseImage(albumList) {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: async (e) => {
						var tempFilePaths = e.tempFilePaths;
						await _this.$api.request({
							url: `/upload?thumb=1&water=1`,
							method: "file",
							data:{
								filePath: tempFilePaths[0]
							},
							load: true
						}).then(res=>{
							const imgList = JSON.parse(res.data);
							//console.log(imgList[0])
							albumList.push({
								thumbPath: imgList[0].thumbPath[0],
								originalPath: imgList[0].filePath
							});
						});
					}
				});
			},
			//查看图片
			viewImage(albumList, index) {
				console.log(index)
				let _this = this;
				let urls = albumList.map(item=>{
					return _this.$api.loadFile(item.originalPath);
				});
				uni.previewImage({
					urls: urls,
					current: index
				})
			},
			//删除图片
			delImage(albumList, index){
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "是否要删除该图片",
					success: (res) => {
						if (res.confirm) {
							albumList.splice(index, 1)
						}
					}
				})
			},
			//桷认提交
			async submitFrom(){
				let _this = this;
				let evaluateList = []; //待提交数组
				if(_this.serviceScore===0){
					this.$api.msg('请选择服务评分');
					return;
				}
				if(_this.matterScore===0){
					this.$api.msg('请选择物流评分');
					return;
				}
				//开始遍历商品列表
				for(let item of _this.goodsList){
					if(item.goodsScore===0){
						_this.$api.msg('请选择商品评分');
						return;
					}
					if(!item.content){
						_this.$api.msg('请填写商品评价描述');
						return;
					}
					//添加进数组
					evaluateList.push({
						serviceScore: _this.serviceScore,
						matterScore: _this.matterScore,
						orderGoodsId: item.id,
						goodsScore: item.goodsScore,
						content: item.content,
						evaluateAlbums: item.evaluateAlbums
					});
				}
				//console.log(evaluateList);
				//提交表单
				await _this.$api.request({
					url: `/account/order/evaluate/${_this.orderId}`,
					method: "post",
					data: evaluateList,
					load: true
				}).then(res=>{
					_this.$api.msg('交易评价成功',1500,false,'success');
					setTimeout(()=>{
						_this.linkUrl(`../order/show?id=${_this.orderId}`);
					}, 1500);
				});
			},
			//跳转链接
			linkUrl(url){
				uni.navigateTo({
					url: url
				});
			},
		},
		//页面初始化
		onLoad(options){
			let id = parseInt(options.id);
			this.initData(id);
		}
	}
</script>

<style lang="scss">
	.order-item{
		margin-bottom: 24rpx;
		border-radius: 20rpx;
		background: #fff;
		.goods-box{
			display: flex;
			padding: 20rpx 0 20rpx 30rpx;
			border-bottom: 2rpx solid #f5f5f5;
			.img-box{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				width: 136rpx;
				height: 136rpx;
				border-radius: 20rpx;
				background: #f5f5f5;
				image{
					border-radius: 20rpx;
					width: 100%;
				}
			}
			.right{
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
				overflow: hidden;
				.title{
					font-size: 30rpx;
					color: #333;
					line-height: 1;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.attr{
					color: #999;
					font-size: 26rpx;
					line-height: 1;
					padding: 20rpx 0;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.price{
					color: #333;
					font-size:30rpx;
					line-height: 1;
					&:before{
						content: '￥';
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.score-box{
		.icon{
			margin: 0 12rpx;
			color: #ccc;
			font-size: 28rpx;
			&.red{
				color: #ff0000;
			}
		}
	}
	.upload-box{
		border-top: 2rpx solid #f5f5f5;
	}
</style>
